<template>
  <div class="user-comment-wrapper">
    <header class="user-comment-header">
      <span @click="$router.back()" class="back-btn">&lt;</span>
      <span>评价商家</span>
    </header>
    <div class="comment-content">
      <div class="business-info" v-if="business">
        <img :src="business.businessImg" alt="商家logo" class="business-img">
        <div class="business-name">{{ business.businessName }}</div>
      </div>
      <div class="star-rating">
        <span v-for="n in 5" :key="n" @click="setStar(n)">
          <i class="fa" :class="n <= star ? 'fa-star' : 'fa-star-o'"></i>
        </span>
        <span class="star-text">{{ starText }}</span>
      </div>
      <textarea
        v-model="comment"
        placeholder="写下你的评价吧~"
        class="comment-textarea"
        maxlength="200"
      ></textarea>
      <div class="comment-btn-area">
        <button class="submit-btn" @click="submitComment">提交评价</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserComment',
  data() {
    return {
      businessId: this.$route.query.businessId,
      orderId: this.$route.query.orderId,
      business: null,
      star: 0,
      comment: ''
    }
  },
  computed: {
    starText() {
      return ['点击评分', '很差', '一般', '满意', '推荐', '非常棒'][this.star] || '点击评分';
    }
  },
  created() {
    // 获取商家信息
    this.$axios.post('BusinessController/getBusinessById', this.$qs.stringify({
      businessId: this.businessId
    })).then(res => {
      this.business = res.data;
    });
  },
  methods: {
    setStar(n) {
      this.star = n;
    },
    submitComment() {
      if (!this.star) {
        this.$toast && this.$toast('请先评分');
        return;
      }
      if (!this.comment.trim()) {
        this.$toast && this.$toast('请填写评价内容');
        return;
      }
      this.$axios.post('OrdersController/addComment', this.$qs.stringify({
        orderId : this.orderId,
        star: this.star,
        content: this.comment
      })).then(() => {
        this.$toast && this.$toast('评价成功');
        this.$router.back();
      }).catch(() => {
        this.$toast && this.$toast('评价失败，请重试');
      });
    }
  }
}
</script>

<style scoped>
.user-comment-wrapper {
  background: #f5f5f5;
  min-height: 100vh;
}
.user-comment-header {
  height: 12vw;
  background: #51b9fe;
  color: #fff;
  display: flex;
  align-items: center;
  font-size: 4.5vw;
  padding-left: 4vw;
  position: relative;
}
.back-btn {
  font-size: 6vw;
  margin-right: 4vw;
  cursor: pointer;
}
.comment-content {
  background: #fff;
  margin: 4vw;
  border-radius: 2vw;
  padding: 4vw;
  box-shadow: 0 2px 8px #eee;
}
.business-info {
  display: flex;
  align-items: center;
  margin-bottom: 3vw;
}
.business-img {
  width: 10vw;
  height: 10vw;
  border-radius: 2vw;
  margin-right: 3vw;
}
.business-name {
  font-size: 4vw;
  font-weight: bold;
}
.star-rating {
  margin-bottom: 3vw;
  font-size: 6vw;
  color: #ffb400;
  display: flex;
  align-items: center;
}
.star-rating .fa {
  cursor: pointer;
  margin-right: 1vw;
}
.star-text {
  font-size: 3vw;
  color: #888;
  margin-left: 2vw;
}
.comment-textarea {
  width: 100%;
  min-height: 18vw;
  font-size: 3.5vw;
  border: 1px solid #eee;
  border-radius: 1vw;
  padding: 2vw;
  margin-bottom: 4vw;
  resize: none;
  box-sizing: border-box;
}
.comment-btn-area {
  text-align: right;
}
.submit-btn {
  background: #51b9fe;
  color: #fff;
  border: none;
  border-radius: 2vw;
  padding: 2vw 6vw;
  font-size: 4vw;
  cursor: pointer;
}
</style>